import Vue from 'vue'
import {
    createPage,
    updatePage,
    updatePageName,
    updatePageConfig,
    updatePageModules,
    updatePageRules,
    deletePage,
    getPageList,
    getPageDetail,
} from "@/api/page";
import { getTabbarList, updateTabbar, deleteTabbar, createTabbar } from "@/api/tabbar.js";
function moveBottomModuleToLast(modules) {
    let hasBottomModule = modules.some(module => module.isBottom === true);

    if (hasBottomModule) {
        const index = modules.findIndex(module => module.isBottom === true);

        if (index >= 0 && index !== modules.length - 1) {
            const updatedModules = [...modules];
            const bottomModule = updatedModules[index];

            updatedModules.splice(index, 1);
            updatedModules.push(bottomModule);

            return updatedModules;
        }
    }

    return modules;
}
/**
* +----------------------------------------------------------------------
* | 友得云客  - 开启房产营销新纪元
* +----------------------------------------------------------------------
* | Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
* +----------------------------------------------------------------------
* | Licensed 友得云客不是自由软件 未经允许不可移除相关版权
* +----------------------------------------------------------------------
* | Author: www.youdeyunke.com
* +----------------------------------------------------------------------
*/
const state = {
    loading: false,
    focus: 'page', // 当前选中哪个部分（决定了调用哪种编辑器)
    currentModuleIndex: 0,  // 当前选中了哪个组件
    currentSubModuleIndex: 0, // 当前选中了哪个子组件

    pages: [],
    pageId: null,
    pageKey: null,
    version: null,
    pageName: null,
    pageConfig: {},
    currentModule: {},
    pageModules: [],
    pageRules: {},
    pageTabbar: {},
    pageTabbars: [],
}

const mutations = {
    setPage: (state, page) => {
        //Vue.set(state, 'page', page)
        // 防止引用
        state.pageId = page.id
        state.focus = 'page'
        state.pageName = page.name
        state.version = page.version
        state.pageModules = page.modules || []
        state.pageConfig = page.config
        state.pageRules = page.rules
        state.pageKey = page.key
    },

    switchPage: (state, pageId) => {
        // 切换当前编辑页面
        var res = state.pages.filter((p, i) => { return p.id === pageId })
        this.commit('setPage', res[0])
    },

    setPageList: (state, pages) => {
        //Vue.set(state, 'page', page)
        // 防止引用
        state.pages = pages || []
    },

    setLoading: (state, val) => {
        state.loading = val
    },

    setModules: (state, modules) => {
        // 必须重新复制一份
        var modules = JSON.parse(JSON.stringify(modules))

        state.pageModules = moveBottomModuleToLast(modules);
        // state.pageModules = modules;

        // state.pageModules = JSON.parse(JSON.stringify(modules))
    },

    setRules: (state, rules) => {
        // 必须重新复制一份
        var rules = JSON.parse(JSON.stringify(rules))
        state.pageRules = rules
        updatePageRules(state.pageId, rules)
    },

    setTabbar: (state, tabbar) => {
        // 必须重新复制一份
        state.pageTabbar = tabbar
    },

    setTabbarList: (state, tabbars) => {
        state.pageTabbars = tabbars
    },

    setFocus: (state, focus) => {
        state.focus = focus
    },

    setCurrentModuleIndex: (state, index) => {
        // 设置当前选中模块
        state.currentModuleIndex = index
        state.currentModule = state.pageModules[index] // 同时更新current module
    },

    setCurrentModule: (state) =>{
        var index = state.currentModuleIndex
        state.currentModule = state.pageModules[index]
    },

    updateModule: (state, data) => {
        // 更新current module 的值
        Object.keys(data).forEach((key, index) => {
            var value = data[key]
            Vue.set(state.currentModule, key, value)
        })
    },

    updateCurrentModule: (state, { data, index }) => {
        if (index == null) {
            index = state.currentModuleIndex;
        }

        var pageModulesCopy = [...state.pageModules];
        pageModulesCopy[index] = data;

        state.pageModules = moveBottomModuleToLast(pageModulesCopy);
    }

}

const actions = {
    loadPage ({ commit }, pageId) {
        commit('setLoading', true)
        getPageDetail(pageId).then((res) => {
            if (res.status != 0) {
                return
            }
            commit('setPage', res.data)
            commit('setLoading', false)
        })
    },

    reloadPage ({ commit }) {
        // 重新加载当前选中页面
        if (!state.pageId) {
            return
        }
        this.dispatch("pagemaker/loadPage", state.pageId)
    },

    loadPageList ({ commit }) {
        getPageList().then((res) => {
            if (res.status != 0) {
                return
            }
            commit('setPageList', res.data)
            if (!state.pageId && res.data.length > 0) {
                // 默认选中首页
                var defaultPage = res.data.filter((page) => {
                    return page.key == 'home'
                })[0]
                if (!defaultPage) {
                    defaultPage = res.data[0]
                }
                commit('setPage', defaultPage)
            }
        })
    },

    loadTabbarList ({ commit }) {
        getTabbarList().then((res) => {
            if (res.status != 0) {
                return
            }
            commit('setTabbarList', res.data)
        })
    },

}


export default {
    namespaced: true,
    state,
    mutations,
    actions
}
